<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div id="test"></div>
  <script src="../js/react.development.js"></script>
  <script src="../js/react-dom.development.js"></script>
  <script src="../js/babel.min.js"></script>
  <script src="../js/prop-types.js"></script>
  <script type="text/babel">
    /*
    需求: 自定义组件, 功能说明如下:
      1. 界面如果页面所示
      2. 点击按钮, 提示第一个输入框中的值
      3. 当第2个输入框失去焦点时, 提示这个输入框中的值
    */

    class MyComponent extends React.Component {
      constructor(props) {
        super(props)

        this.myRefs = React.createRef();
      }

      // 点击按钮进行提示
      hint = () => {
        const { ipt } = this.refs;
        alert(ipt.value);
        // 清空文本框的显示内容
        ipt.value = '';
      }

      // 失去焦点的时候进行显示
      blur = (event) => {
        // 1.利用 事件对象进行处理
        // alert(event.target.value);
        console.log(this.myRefs);
        // 2.利用官方推荐的ref进行处理
        alert(this.myRefs.current.value);
        this.myRefs.current.value = ''

      }
      // ref="ipt" 第一种引用方式，不推荐使用
      render() {
        return (
         <div>
            <input type="text" ref="ipt"/>
            <input type="button" onClick={this.hint} value="按钮" />
            <input type="text" onBlur={this.blur} ref={this.myRefs}/>
         </div>
        )
      }
    }

    ReactDOM.render(<MyComponent />, document.getElementById('test'));
  </script>
</body>

</html>